<template>
  <page-main class="page-appointment-index">
    <div class="p-t-15"></div>
    <van-cell-group inset class="van-cell-left">
      <van-cell class="doctor">
        <div slot="icon" class="icon"><van-image :src="staff.staffPicture" round  width="40px" height="40px" /></div>
        <div class="name">
          <b>{{staff.staffName}}</b>
          <span>{{$util.setName(staff.professionalTitle, init_data.professional_list)}}</span>
        </div>
      </van-cell>
      <van-cell title="就诊医院" value="广医云" />
      <!-- <van-cell title="医院地址" :value="info.hospital" /> -->
      <van-cell title="就诊科室" :value="pageParams.officeName" />
      <van-cell title="就诊时间" :value="pageParams.schedulingYear" />
      <van-cell title="候诊时间" :value="pageParams.id" />
      <van-cell title="挂号类型" :value="actions.registrationName" />
      <!-- <van-cell title="挂号类型" :value="actions.registrationName" is-link @click="showAction('regist')"/> -->
      <van-cell title="费用" v-if="actions.fee">
        <span class="c-red">￥{{ actions.fee }}</span>
      </van-cell>
    </van-cell-group>
    <div class="p-t-15"></div>
    <van-cell-group inset class="van-cell-left">
      <van-cell title="就诊人" :value="patient.custName"/>
      <van-cell title="身份证号" :value="patient.idNo" />
      <van-cell title="就诊卡" :value="actions.cardId" is-link @click="showAction('card')"/>
    </van-cell-group>

    <div class="p-a-15">
      <p class="tips">挂号前仔细阅读<span class="c-blue" @click="$refs.showAgreement.init('appointment')">《挂号须知》</span></p>
      <van-button type="info" block :loading="btn_loading" @click="submitForm">确认预约</van-button>
    </div>
    <show-agreement ref="showAgreement" />
    <van-action-sheet v-model="actions.isShow" :actions="actions.list" @select="selectAction" />
  </page-main>
</template>
<script>
import showAgreement from '@/components/ShowAgreement';
export default {
  components:{
    showAgreement
  },
  data(){
    return {
      pageParams: {},
      btn_loading: false,
      staff:{},
      patient:{},
      init_data:{
        regist_list:[],
        card_list: [],
      },
      actions:{
        isShow: false,
        type: null,
        regist: null,
        registrationName: '请选择挂号类型',
        cardId: '请选择就诊卡号',
        list: [],
      },
      form:{
        cardId: null,
        makeTime: null,
        registId: null,
        schedulingId: null,
      }
    }
  },
  created(){
    this.pageParams = this.$route.query;
    console.log(this.pageParams);
    this.form.schedulingId = this.pageParams.schedulingId;
    this.form.makeTime = this.pageParams.id;
    this.getInitData();
  },
  methods:{
    async getInitData(){
      this.init_data.professional_list = await this.$util.getDictList('professional_title');
      this.init_data.staffLabel_list = await this.$util.getDictList('staff_label');
      this.getPatientInfo();
      this.getStaffInfo();
      this.getCard();
    },
    getPatientInfo(){
      this.$http('get', '/admin/custApi/'+ this.pageParams.patientId, {}, (data,msg) => {
        this.patient = data;
      });
    },
    getStaffInfo(){
      this.$http('get', '/admin/officeApi/staffOrScheduling/'+this.$route.query.makeStaffId, {}, (data,msg) => {
        this.staff = data;
        this.staff.staffPicture = this.$util.baseUrl + this.staff.staffPicture;
        this.getRegistrationFee(data.professionalTitle);
      })
    },
    getRegistrationFee(id){
      this.$http('get', '/admin/registrationApi/GetRegistrationAndFee', {professionalTitleId: id}, (data,msg) => {
        this.init_data.regist_list = this.$util.transformArray(data, 'registId', 'registrationName');
        let obj = this.init_data.regist_list.find(item => item.registrationId == '0');
        this.form.registId = obj.id;
        this.actions.registrationName = obj.name;
        this.actions.fee = obj.fee;
      })
    },
    getCard(){
      this.$http('get', '/admin/custApi/getCust/'+ this.pageParams.patientId,{}, (data,msg) => {
        this.init_data.card_list = this.$util.transformArray(data, 'cardId', 'cardId');
        console.log(this.init_data.card_list);
        this.init_data.card_list = this.init_data.card_list.map(item => {
          item.name = item.custName + '(' + item. cardId +') ';
          return item;
        })
        if(this.init_data.card_list.length == 1){
          this.actions.cardId = this.init_data.card_list[0].id;
          this.form.cardId = this.init_data.card_list[0].id;
        }
      })
    },
    showAction(type){
      this.actions.isShow = true;
      this.actions.type = type;
      this.actions.name = type == 'regist' ? 'registrationName' : 'cardId';
      this.actions.list = this.init_data[type + '_list'];
    },  
    selectAction(obj){
      if(this.actions.type == 'regist'){
        this.form.registId = obj.id;
        this.actions.registrationName = obj.name;
        this.actions.fee = obj.fee;
      }else{
        this.actions.cardId = obj.id;
        this.form.cardId = obj.id;
      }
      this.actions.isShow = false;
    },
    verifyForm(){
      if(!this.$verify.null(this.form.registId, '请选择挂号类型')){
        return false;
      }
      if(!this.$verify.null(this.form.cardId, '请选择就诊卡')){
        return false;
      }
      return true;
    },
    submitForm(){
      if(!this.verifyForm()){
        return;
      }
      this.btn_loading = true;
      this.$http('post', '/admin/registrationApi', this.form, (data,msg) => {
        this.btn_loading = false;
        this.$toast.success('预约成功！');
        this.$store.commit('setCurrentPatient', this.patient);
        this.$util.gotoPage('/appointment/detail', {makeId: data, from: 'add'});

      }, msg => {
        this.btn_loading = false;
      })
    }
  }
}
</script>